<template>
    <div class="person_template">
        <div class="item">
            <div class="title" style="margin-bottom: 8px;">启动环境时</div>
            <div class="content">
                <el-radio-group v-model="state.formData.person.startEnvironment">
                    <el-radio :value="0">仅检测页</el-radio>
                    <el-radio :value="1">打开上次</el-radio>
                </el-radio-group>
            </div>
        </div>

        <div class="item">
            <div class="title" style="margin-bottom: 8px;">环境角标</div>
            <div class="content">
                <el-radio-group v-model="state.formData.person.sub">
                    <el-radio :value="0">不展示角标</el-radio>
                    <el-radio :value="1">展示序号</el-radio>
                    <el-radio :value="2">展示名称</el-radio>
                </el-radio-group>
            </div>
        </div>

        <div class="item">
            <div class="title" style="margin-bottom: 8px;">环境窗口位置&大小</div>
            <div class="content">
                <el-radio-group v-model="state.formData.person.position">
                    <el-radio :value="0">默认</el-radio>
                    <el-radio :value="1">记住并跟随最近关闭时的状态</el-radio>
                </el-radio-group>
            </div>
        </div>


        <div class="item">
            <div class="content">
                <app-button-item>
                    <template #title>
                        <div>导入书签</div>
                    </template>
                    <template #explain>
                        <div> 设置后，新建及导入环境时将带有此处的书签 </div>
                    </template>
                    <template #switch>
                        <div class="text3">导入书签</div>
                    </template>
                </app-button-item>
            </div>
        </div>

        <div class="item">
            <div class="content">
                <app-button-item>
                    <template #title>
                        <div>浏览器界面语言</div>
                    </template>
                    <template #switch>
                        <el-select v-model="state.formData.person.languages" @change="changeLanguages"  placeholder="选择语言"
                            style="width: 160px">
                            <el-option v-for="item in state.map.languages" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </template>
                </app-button-item>
            </div>
        </div>

        <div class="item">
            <div class="title">任务栏浏览器环境图标</div>
            <div class="content">
                <el-select v-model="state.formData.person.browserIcon" placeholder="选择语言" style="width: 330px">
                    <el-option v-for="item in state.map.browserIcons" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </div>
        </div>

    </div>
</template>

<script setup>
const { store, state } = inject('preference_store')

const changeLanguages = () => {
    state.formData.hign.language.languages = [state.formData.person.languages]
}
</script>

<style lang="scss" scoped>
.person_template {
    display: flex;
    flex-direction: column;

    .item:not(:first-child) {
        margin-top: 16px;
    }

    .item {
        display: flex;
        flex-direction: column;


        .title {
            color: #1d2129;
            font-size: 14px;
            margin-bottom: 16px;
        }
    }
}

.flex {
    display: flex;
    align-items: center;
}

.column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.text1 {
    font-size: 14px;
    color: #1d2129;
}

.text2 {
    color: #86909c;
    font-size: 12px;
}

.text3 {
    color: #5e8fff;
    font-size: 12px;
    cursor: pointer;
}
</style>